<template>
	<div class="newmusic" v-if="newsong">

		<div class="song" v-for="(item,index) in newsong" :key="item.id">
			<div class="ablum_box">
				<img :src="item.album.blurPicUrl" alt="" />
			</div>
			<p>{{item.name}}</p>
			<span>{{item.artists[0].name}}</span>
			<i  class="iconfont icon-zanting" v-if="index==ind" @click="listen(index,item.id)"></i>
			
			<i class="iconfont icon-bofang1" v-else @click="listen(index,item.id)"></i>
		
		</div>
		<div><audio ref="songnew" :src="musicUrl" ></audio></div>
	</div>
</template>

<script>
	export default {
		name: "playlist",

		data() {
			return {
				newsong: [],
				isShow: true,
				ind: -1,
				musicUrl:""
			}
		},
		methods: {
			getTopSong() {
				this.$http.get("/top/song", {
					params: {
						type: 96
					}
				}).then(res => {
					console.log(res)
					let arr = res.data.data;
					this.newsong = arr.splice(0, 3);
					console.log(this.newsong)
				})

			},
			listen(index,id) {
				//				this.newsong[index].isShow = !this.isShow
				if(this.ind == index) {
					this.ind = -1
				}else{
				this.ind = index
					this.musicUrl=this.newsong[index].mp3Url;
					console.log(this.$refs.songnew)
					this.$refs.songnew.play();
				}
				
				this.$router.push({
					name:"musicPlayPage",
					params:{
						mid:id
					}
				})

			},
			
		},
		mounted() {
			this.getTopSong();

		}

	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.newmusic {
		display: flex;
		justify-content: space-around;
		padding: 0 vw(16);
		margin: vw(10) 0 0;
		position: relative;
		.song {
			width: 32%;
			text-align: center;
			position: relative;
			.ablum_box {
				width: 100%;
				height: vw(110);
				border-radius: vw(5);
				overflow: hidden;
				img {
					width: 100%;
				}
			}
			p {
				font-size: vw(14);
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			span {
				font-size: vw(12);
				color: #999;
			}
			i {
				font-size: vw(10);
				color: red;
				position: absolute;
				background-color: rgba(255, 255, 255, .8);
				border-radius: 50%;
				bottom: 46px;
				right: 10px;
				padding: vw(8);
				box-sizing: border-box;
			}
		}
		h3 {
			font-size: vw(10);
			border: 1px solid #ddd;
			border-radius: vw(10);
			padding: vw(4) vw(6);
			position: absolute;
			top: -32px;
			right: 16px;
			color: #666;
			font-weight: 400;
		}
	}
</style>